<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签/徽章/字体图标</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/assets/css/font-awesome.min.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="css/assets/css/ace-fonts.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="css/assets/css/ace.min.css" id="main-ace-style" />
</head>
<body class="no-skin" style="background: #fff;margin: 20px">
<div class="row">
    <div class="col-xs-12">
        <!--标记、徽章、页码-S-->
        <div class="row">
            <div class="col-sm-6">
                <h3 class="header smaller lighter green">Lables & Badges</h3>

                <!-- #section:elements.label -->
                <p>
                    <span class="label">Default</span>
                    <span class="label label-success arrowed">Success</span>

											<span class="label label-warning">
												<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i>
												Warning
											</span>
                    <span class="label label-danger arrowed-in">Danger</span>
                    <span class="label label-info arrowed-in-right arrowed">Info</span>
                    <span class="label label-inverse">Inverse</span>
                </p>

                <!-- /section:elements.label -->

                <!-- #section:elements.badge -->
                <p>
                    <span class="badge">1</span>
                    <span class="badge badge-grey">1</span>
                    <span class="badge badge-success">2</span>
                    <span class="badge badge-warning">4</span>
                    <span class="badge badge-danger">6</span>
                    <span class="badge badge-info">8</span>
                    <span class="badge badge-purple">3</span>
                    <span class="badge badge-inverse">10</span>
                    <span class="badge badge-pink">11</span>
                    <span class="badge badge-yellow">2</span>
                </p>

                <!-- /section:elements.badge -->
                <p>
                    <span class="label label-lg label-pink arrowed-right">Large</span>
                    <span class="label label-lg label-yellow arrowed-in">Yellow</span>
                    <span class="label label-lg label-purple arrowed">Purple</span>
                </p>

                <p>
                    <span class="label label-xlg label-primary arrowed arrowed-right">Larger</span>
                    <span class="label label-xlg label-grey arrowed-in-right arrowed-in">Grey</span>
                    <span class="label label-xlg label-light arrowed-in-right">Light</span>
                </p>

                <p>
                    <span class="label label-sm label-primary arrowed arrowed-right">Smaller</span>
                </p>
            </div><!-- /.span -->
            <div class="col-sm-6">
                <h3 class="header smaller lighter red">页码</h3>

                <div>
                    <ul class="pagination">
                        <li class="disabled">
                            <a href="#">
                                <i class="ace-icon fa fa-angle-double-left"></i>
                            </a>
                        </li>

                        <li class="active">
                            <a href="#">1</a>
                        </li>

                        <li>
                            <a href="#">2</a>
                        </li>

                        <li>
                            <a href="#">3</a>
                        </li>

                        <li>
                            <a href="#">4</a>
                        </li>

                        <li>
                            <a href="#">5</a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-angle-double-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>

                <p></p>
                <ul class="pager">
                    <li class="previous">
                        <a href="#">&larr; Older</a>
                    </li>

                    <li class="next">
                        <a href="#">Newer &rarr;</a>
                    </li>
                </ul>

            </div><!-- /.span -->
        </div>
        <!--标记和徽章-E-->

        <!--字体图标-S-->
        <hr />
        <!--可伸缩的 FontAwesome 图标-->
        <div class="row">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">
                    可伸缩的 FontAwesome 图标
                    <small>
                        <a href="http://fontawesome.io/icons/" target="_blank">
                            (查看更多图标
                            <i class="ace-icon fa fa-external-link"></i>)
                        </a>
                    </small>
                </h3>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon fa fa-adjust"></i>
                        fa-adjust
                    </li>

                    <li>
                        <i class="ace-icon fa fa-asterisk"></i>
                        fa-asterisk
                    </li>

                    <li>
                        <i class="ace-icon fa fa-ban"></i>
                        fa-ban
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bar-chart-o"></i>
                        fa-bar-chart-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-barcode"></i>
                        fa-barcode
                    </li>

                    <li>
                        <i class="ace-icon fa fa-flask"></i>
                        fa-flask
                    </li>

                    <li>
                        <i class="ace-icon fa fa-beer"></i>
                        fa-beer
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bell-o"></i>
                        fa-bell-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bell"></i>
                        fa-bell
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bolt"></i>
                        fa-bolt
                    </li>

                    <li>
                        <i class="ace-icon fa fa-book"></i>
                        fa-book
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bookmark"></i>
                        fa-bookmark
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bookmark-o"></i>
                        fa-bookmark-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-briefcase"></i>
                        fa-briefcase
                    </li>

                    <li>
                        <i class="ace-icon fa fa-bullhorn"></i>
                        fa-bullhorn
                    </li>

                    <li>
                        <i class="ace-icon fa fa-calendar"></i>
                        fa-calendar
                    </li>

                    <li>
                        <i class="ace-icon fa fa-camera"></i>
                        fa-camera
                    </li>

                    <li>
                        <i class="ace-icon fa fa-camera-retro"></i>
                        fa-camera-retro
                    </li>

                    <li>
                        <i class="ace-icon fa fa-certificate"></i>
                        fa-certificate
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon fa fa-check-square-o"></i>
                        fa-check-square-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-square-o"></i>
                        fa-square-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-circle"></i>
                        fa-circle
                    </li>

                    <li>
                        <i class="ace-icon fa fa-circle-o"></i>
                        fa-circle-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cloud"></i>
                        fa-cloud
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cloud-download"></i>
                        fa-cloud-download
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cloud-upload"></i>
                        fa-cloud-upload
                    </li>

                    <li>
                        <i class="ace-icon fa fa-coffee"></i>
                        fa-coffee
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cog"></i>
                        fa-cog
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cogs"></i>
                        fa-cogs
                    </li>

                    <li>
                        <i class="ace-icon fa fa-comment"></i>
                        fa-comment
                    </li>

                    <li>
                        <i class="ace-icon fa fa-comment-o"></i>
                        fa-comment-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-comments"></i>
                        fa-comments
                    </li>

                    <li>
                        <i class="ace-icon fa fa-comments-o"></i>
                        fa-comments-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-credit-card"></i>
                        fa-credit-card
                    </li>

                    <li>
                        <i class="ace-icon fa fa-tachometer"></i>
                        fa-tachometer
                    </li>

                    <li>
                        <i class="ace-icon fa fa-desktop"></i>
                        fa-desktop
                    </li>

                    <li>
                        <i class="ace-icon fa fa-arrow-circle-o-down"></i>
                        fa-arrow-circle-o-down
                    </li>

                    <li>
                        <i class="ace-icon fa fa-download"></i>
                        fa-download
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon fa fa-pencil-square-o"></i>
                        fa-pencil-square-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-envelope"></i>
                        fa-envelope
                    </li>

                    <li>
                        <i class="ace-icon fa fa-envelope-o"></i>
                        fa-envelope-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-exchange"></i>
                        fa-exchange
                    </li>

                    <li>
                        <i class="ace-icon fa fa-exclamation-circle"></i>
                        fa-exclamation-circle
                    </li>

                    <li>
                        <i class="ace-icon fa fa-external-link"></i>
                        fa-external-link
                    </li>

                    <li>
                        <i class="ace-icon fa fa-eye-slash"></i>
                        fa-eye-slash
                    </li>

                    <li>
                        <i class="ace-icon fa fa-eye"></i>
                        fa-eye
                    </li>

                    <li>
                        <i class="ace-icon fa fa-video-camera"></i>
                        fa-video-camera
                    </li>

                    <li>
                        <i class="ace-icon fa fa-fighter-jet"></i>
                        fa-fighter-jet
                    </li>

                    <li>
                        <i class="ace-icon fa fa-film"></i>
                        fa-film
                    </li>

                    <li>
                        <i class="ace-icon fa fa-filter"></i>
                        fa-filter
                    </li>

                    <li>
                        <i class="ace-icon fa fa-fire"></i>
                        fa-fire
                    </li>

                    <li>
                        <i class="ace-icon fa fa-flag"></i>
                        fa-flag
                    </li>

                    <li>
                        <i class="ace-icon fa fa-folder"></i>
                        fa-folder
                    </li>

                    <li>
                        <i class="ace-icon fa fa-folder-open"></i>
                        fa-folder-open
                    </li>

                    <li>
                        <i class="ace-icon fa fa-folder-o"></i>
                        fa-folder-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-folder-open-o"></i>
                        fa-folder-open-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-cutlery"></i>
                        fa-cutlery
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon fa fa-gift"></i>
                        fa-gift
                    </li>

                    <li>
                        <i class="ace-icon fa fa-glass"></i>
                        fa-glass
                    </li>

                    <li>
                        <i class="ace-icon fa fa-globe"></i>
                        fa-globe
                    </li>

                    <li>
                        <i class="ace-icon fa fa-users"></i>
                        fa-users
                    </li>

                    <li>
                        <i class="ace-icon fa fa-hdd-o"></i>
                        fa-hdd-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-headphones"></i>
                        fa-headphones
                    </li>

                    <li>
                        <i class="ace-icon fa fa-heart"></i>
                        fa-heart
                    </li>

                    <li>
                        <i class="ace-icon fa fa-heart-o"></i>
                        fa-heart-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-home"></i>
                        fa-home
                    </li>

                    <li>
                        <i class="ace-icon fa fa-inbox"></i>
                        fa-inbox
                    </li>

                    <li>
                        <i class="ace-icon fa fa-info-circle"></i>
                        fa-info-circle
                    </li>

                    <li>
                        <i class="ace-icon fa fa-key"></i>
                        fa-key
                    </li>

                    <li>
                        <i class="ace-icon fa fa-leaf"></i>
                        fa-leaf
                    </li>

                    <li>
                        <i class="ace-icon fa fa-laptop"></i>
                        fa-laptop
                    </li>

                    <li>
                        <i class="ace-icon fa fa-gavel"></i>
                        fa-gavel
                    </li>

                    <li>
                        <i class="ace-icon fa fa-lemon-o"></i>
                        fa-lemon-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-lightbulb-o"></i>
                        fa-lightbulb-o
                    </li>

                    <li>
                        <i class="ace-icon fa fa-lock"></i>
                        fa-lock
                    </li>

                    <li>
                        <i class="ace-icon fa fa-unlock"></i>
                        fa-unlock
                    </li>
                </ul>
            </div>
        </div>

        <hr />
        <!--可伸缩的 Glyphicons 图标-->
        <div class="row">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">
                    可伸缩的 Glyphicons 图标
                    <small>
                        <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">
                            (查看更多图标
                            <i class="ace-icon fa fa-external-link"></i>)
                        </a>
                    </small>
                </h3>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon glyphicon glyphicon-asterisk"></i>
                        glyphicon-asterisk
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-plus"></i>
                        glyphicon-plus
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-euro"></i>
                        glyphicon-euro
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-minus"></i>
                        glyphicon-minus
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-cloud"></i>
                        glyphicon-cloud
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-envelope"></i>
                        glyphicon-envelope
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-pencil"></i>
                        glyphicon-pencil
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-glass"></i>
                        glyphicon-glass
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-music"></i>
                        glyphicon-music
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-search"></i>
                        glyphicon-search
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-heart"></i>
                        glyphicon-heart
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-star"></i>
                        glyphicon-star
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-star"></i>
                        glyphicon-star-empty
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-user"></i>
                        glyphicon-user
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-film"></i>
                        glyphicon-film
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-th"></i>
                        glyphicon-th-large
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-th"></i>
                        glyphicon-th
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-th"></i>
                        glyphicon-th-list
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-ok"></i>
                        glyphicon-ok
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon glyphicon glyphicon-remove"></i>
                        glyphicon-remove
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-zoom-in"></i>
                        glyphicon-zoom-in
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-zoom-out"></i>
                        glyphicon-zoom-out
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-off"></i>
                        glyphicon-off
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-signal"></i>
                        glyphicon-signal
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-cog"></i>
                        glyphicon-cog
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-trash"></i>
                        glyphicon-trash
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-home"></i>
                        glyphicon-home
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-file"></i>
                        glyphicon-file
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-time"></i>
                        glyphicon-time
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-road"></i>
                        glyphicon-road
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-download"></i>
                        glyphicon-download-alt
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-download"></i>
                        glyphicon-download
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-upload"></i>
                        glyphicon-upload
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-inbox"></i>
                        glyphicon-inbox
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-play"></i>
                        glyphicon-play-circle
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-repeat"></i>
                        glyphicon-repeat
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-refresh"></i>
                        glyphicon-refresh
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-list"></i>
                        glyphicon-list-alt
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon glyphicon glyphicon-lock"></i>
                        glyphicon-lock
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-flag"></i>
                        glyphicon-flag
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-headphones"></i>
                        glyphicon-headphones
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-volume-off"></i>
                        glyphicon-volume-off
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-volume-down"></i>
                        glyphicon-volume-down
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-volume-up"></i>
                        glyphicon-volume-up
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-qrcode"></i>
                        glyphicon-qrcode
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-barcode"></i>
                        glyphicon-barcode
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-tag"></i>
                        glyphicon-tag
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-tags"></i>
                        glyphicon-tags
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-book"></i>
                        glyphicon-book
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-bookmark"></i>
                        glyphicon-bookmark
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-print"></i>
                        glyphicon-print
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-camera"></i>
                        glyphicon-camera
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-font"></i>
                        glyphicon-font
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-bold"></i>
                        glyphicon-bold
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-italic"></i>
                        glyphicon-italic
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-text-height"></i>
                        glyphicon-text-height
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-text-width"></i>
                        glyphicon-text-width
                    </li>
                </ul>
            </div>

            <div class="col-xs-6 col-sm-3">
                <ul class="list-unstyled">
                    <li>
                        <i class="ace-icon glyphicon glyphicon-align-left"></i>
                        glyphicon-align-left
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-align-center"></i>
                        glyphicon-align-center
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-align-right"></i>
                        glyphicon-align-right
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-align-justify"></i>
                        glyphicon-align-justify
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-list"></i>
                        glyphicon-list
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-indent-left"></i>
                        glyphicon-indent-left
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-indent-right"></i>
                        glyphicon-indent-right
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-facetime-video"></i>
                        glyphicon-facetime-video
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-picture"></i>
                        glyphicon-picture
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-map-marker"></i>
                        glyphicon-map-marker
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-adjust"></i>
                        glyphicon-adjust
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-tint"></i>
                        glyphicon-tint
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-edit"></i>
                        glyphicon-edit
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-share"></i>
                        glyphicon-share
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-check"></i>
                        glyphicon-check
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-move"></i>
                        glyphicon-move
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-step-backward"></i>
                        glyphicon-step-backward
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-fast-backward"></i>
                        glyphicon-fast-backward
                    </li>

                    <li>
                        <i class="ace-icon glyphicon glyphicon-backward"></i>
                        glyphicon-backward
                    </li>
                </ul>
            </div>
        </div><!-- PAGE CONTENT ENDS -->

        <!--字体图标-E-->
    </div>
</div>
</body>
</html>